<template>
  <div class="grid-arrange-order">
    <h3>
      justify-items、align-items、place-items、justify-content、align-content、place-content
      用法
    </h3>
    <pre>
      justify-items: 设置单元格内容的水平位置（左中右）
      align-items: 设置单元格内容的垂直位置（上中下）
      place-items: 设置单元格内容的水平位置（左中右）和垂直位置（上中下）
      justify-content: 设置整个内容区域在容器里面的水平位置（左中右）
      align-content: 设置整个内容区域的垂直位置（上中下）
      place-content: 设置整个内容区域的垂直位置和水平位置（上中下和左中右）
    </pre>
    <pre class="remarks">
      可选值
      justify-items: start | end | center | stretch;
      
      start：对齐单元格的起始边缘。
      end：对齐单元格的结束边缘。
      center：单元格内部居中。
      stretch：拉伸，占满单元格的整个宽度（默认值

      align-items: start | end | center | stretch;

      place-items: &lt;align-items&gt; &lt;justify-items&gt;;

      justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

      start - 对齐容器的起始边框
      end - 对齐容器的结束边框
      center - 容器内部居中
      stretch - 项目大小没有指定时，拉伸占据整个网格容器
      space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
      space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
      space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

      align-content: start | end | center | stretch | space-around | space-between | space-evenly;

      place-content: &lt;align-content&gt; &lt;justify-content&gt;;
    </pre>
    <div class="grid-arrange-order-content">
      <div v-for="item in 12" :key="item" :class="'item' + item">
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GridArrangeOrder',
  data() {
    return {}
  },
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.grid-arrange-order {
  &-content {
    height: 600px;
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(4, 100px);
    gap: 5px;
    justify-content: space-evenly;
    align-content: center;
    justify-items: evenly;
    align-items: evenly;
    div {
      background-color: red;
    }
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
